<template>
    <div class="box">
    <a-card :bordered="false" style="width: 100%">
      <slot slot="title">
        <a-breadcrumb>
          <a-breadcrumb-item>系统设置</a-breadcrumb-item>
          <a-breadcrumb-item>住户标签管理</a-breadcrumb-item>
        </a-breadcrumb>
        <span class="title">住户标签管理</span>
      </slot>
      <a-row>
        <a-col :span="8" align="middle" justify="center">
          <span>标签名称: </span>
          <a-input v-model="value" placeholder="请输入" />
        </a-col>
        <a-col :span="8" :offset="8" align="“center”">
          <ContextButton :loading="loading" conText="查询" type="primary" />
          <ContextButton conText="重置" class="resectBtn" />
        </a-col>
      </a-row>
    </a-card>

    <div class="mine">
            <MonthCardManagementFrom :taberTitle="columns" :tablename="MonthCard" :data="MonthCarddata">
            </MonthCardManagementFrom>
        </div>
    </div>
</template>

<script>

import MonthCardManagementFrom from '@/components/public/TaberFrom/MonthCardManagementFrom.vue'
import { MonthCardFn } from "@/config/api"
export default {
  name: 'ResidentLabel',
  watch: {},
  mounted() {
    console.log(this.$router, this.$route);
    this.getMonthCardlist()

  },


  data() {
    return {
      loading: false,
      value: '',
       MonthCard: "仪表列表",
            columns: [],
            MonthCarddata: []
    };
  },
  components: {
        MonthCardManagementFrom
    },
  methods: {
      async getMonthCardlist() {
            let { data: res } = await MonthCardFn()
            // console.log(res)
            const { columns, MonthCardlist } = res.data
            this.columns = columns;
            this.MonthCarddata = MonthCardlist
            // console.log(this.columns, this.Gallerydata)
        }
  },
};

</script>

<style lang="less" scoped>
.box {
  width: 1136px;
  
}
::v-deep .ant-input {
    width: 72%;
    margin-left: 8px;
  }

.title {
  color: rgba(0, 0, 0, 0.8);
  font: 700 20px "微软雅黑";
  box-sizing: border-box;
}
::v-deep .ant-breadcrumb {
  margin-bottom: 10px;
}
.resectBtn {
  margin-left: 10px;
}

.mine {
        padding: 20px;
        box-sizing: border-box;
        margin-top: 20px;
        width: 1136px;
        display: flex;
        font-family: 'MalayalamMN', 'Malayalam MN', sans-serif;
        font-weight: 400;
        font-style: normal;
        text-align: left;
        background-color: #ffffff;
        border-color: #e9e9e9;
        border-width: 1px;
        border-style: solid;
        color: #333333;
        line-height: normal;
        text-transform: none;
    }


</style>